import { h } from 'vue'
/**
 * @description 表格配置
 * @param 其余参数参考antd table
 * @param {String} type 类型：input输入框，select下拉框，tree树结构，number数字，date时间，type只要存在则被a-form-item包裹
 * @param {Boolean} required 是否必填，默认false
 * @param {Array} option 下拉选项，选择器和树结构需要
 * @param {Object} optionConfig 下拉选项对象集合，在组件中传入{xxx: []}
 * @param {Boolean|String} disabled 为字符串时，disabledConfig和disabledKeys必须存在一个，如果都存在则互相对比，相同值则禁用
 * @param {String} disabledKeys 禁用对比字段：转递当前行需要对比字段key
 * @param {Object} disabledConfig 在组件中传入的disabledConfig对象，用于对比disabledKeys或其他值
 */

// form配置，使用的key作为唯一，表格是dataIndex
export const form = [
  {
    key: 'name',
    title: '名字',
    type: 'input'
  },
  {
    key: 'select',
    title: '选择器',
    type: 'select',
    option: [{ id: 1, name: '选择1' }]
  },
  {
    key: 'selectSearch',
    title: '搜索选择器',
    type: 'select',
    showSearch: true,
    option: [{ id: 1, name: '选择1' }]
  },
  {
    key: 'tree',
    title: '树结构',
    type: 'tree',
    option: [{ id: 1, name: '树1' }]
  },
  {
    key: 'date',
    title: '时间',
    type: 'date'
  },
  {
    title: '时间区间',
    dataIndex: 'range',
    key: 'range',
    type: 'range',
    params: ['start', 'end']
  },
  {
    key: 'customize',
    title: '自定义',
    slotName: 'customize'
  }
]

// table
export const columns = [
  {
    width: 70,
    title: '序号',
    dataIndex: 'index',
    key: 'index'
  },
  {
    title: '名字',
    dataIndex: 'name',
    key: 'name',
    // {text, record, index, column}
    customRender: ({ value }) => h('span', { innerHTML: value })
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
    // {text, record, index, column}
    customRender: ({ value }) => h('span', { innerHTML: `${value}岁` })
  },
  {
    title: '选择器',
    dataIndex: 'select',
    key: 'select'
  },
  {
    title: '搜索选择器',
    dataIndex: 'selectSearch',
    key: 'selectSearch'
  },
  {
    title: '树选择器',
    dataIndex: 'tree',
    key: 'tree'
  },
  {
    title: '时间',
    dataIndex: 'date',
    key: 'date'
  },
  {
    title: '附件',
    dataIndex: 'image',
    key: 'image'
  },
  {
    title: '操作',
    key: 'operate',
    dataIndex: 'operate',
    fixed: 'right'
  }
]

// 表单间隔
export const formItemLayout = {
  titleCol: {
    span: 3
  },
  wrapperCol: {
    span: 8
  }
}
